<template>
  <div class="container">
    <div class="btn">
      <el-button
        type="primary"
        @click="openDialog('add')"
      >添加</el-button>
      <el-button
        type="primary"
        @click="openDialog('edit')"
      >编辑</el-button>
      <el-button
        type="primary"
        @click="reload"
      >刷新</el-button>
    </div>
    <dia-log
      ref="myDialog"
      @close="closeDialog"
      @closed="closedDialog"
    >
      <template v-slot:content>
        <el-form
          ref="myForm"
          :model="formData"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item
            label="用户名"
            prop="username"
          >
            <el-input
              v-model="formData.username"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item
            label="电话号码"
            prop="phonenumber"
          >
            <el-input
              v-model="formData.phonenumber"
              placeholder="请输入电话号码"
            />
          </el-form-item>
        </el-form>
      </template>

      <template v-slot:footer>
        <el-button
          type="primary"
          size="mini"
          :loading="loading"
          @click="commit"
        >提交</el-button>
        <el-button
          size="mini"
          @click="reset"
        >重置</el-button>
        <el-button
          size="mini"
          @click="closeDialog"
        >取消</el-button>
        <Button>
          <template v-slot:default> 我是通过jsx来的s </template>
        </Button>
      </template>
    </dia-log>
  </div>
</template>

<script>
import diaLog from '@/components/myDialog'
import { personMix } from '@/mixins/person'
import Button from '@/components/Button'

export default {
  components: {
    diaLog,
    Button,
  },
  mixins: [personMix],
  data() {
    return {
      formData: {
        username: '',
        phonenumber: '',
      },
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入用户名' },
        ],
        phonenumber: [
          { required: true, trigger: 'blur', message: '请输入密码' },
        ],
      },
      loading: false,
    }
  },
  methods: {
    openDialog(type) {
      const title = type === 'add' ? '添加' : '编辑'
      if (type === 'edit') {
        this.formData = {
          username: '123',
          phonenumber: '456',
        }
      }
      this.$refs.myDialog.modifyDialogConfig({
        title,
        status: true,
        width: '600px',
      })
    },
    closeDialog() {
      this.$refs.myDialog.modifyDialogConfig({ status: false })
    },
    closedDialog() {
      this.formData = this.$options.data().formData
      this.$refs.myForm.resetFields()
    },
    commit() {
      this.loading = true
      this.$confirm('完成信息核对, 确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.formData = this.$options.data().formData
    },
  },
}
</script>

<style lang="less">
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .btn {
    width: 500px;
    margin: 200px auto;
  }
}
</style>
